<template>
  <el-dialog v-model="visible" title="日志查询" width="800px">
    <!-- 查询区 -->
    <div class="query-area">
      <el-input v-model="keyword" placeholder="搜索关键字" clearable @input="" class="input-field" />
    </div>

    <!-- 表格展示区 -->
    <div class="table-area">
      <el-table :data="filteredLogs" style="width: 100%">
        <!-- 内容列，自适应宽度并换行 -->
        <el-table-column prop="actionlog_content" label="内容">
          <template #default="{ row }">
            <div class="cell-wrap">{{ row.actionlog_content }}</div>
          </template>
        </el-table-column>


        <!-- 时间列固定宽度 -->
        <el-table-column prop="actionlog_createdate" label="时间" width="150" />


        <!-- 操作人列固定宽度 -->
        <el-table-column prop="user_name" label="操作人" width="150" />
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'
import {selectActionLogs} from "@/api/index.js";

const props = defineProps({ modelValue: Boolean })
const emit = defineEmits(['update:modelValue'])

const visible = ref(false)
const innerType = ref('')
const innerTargetId = ref(null)
const logs = ref([])
const keyword = ref('')

const filteredLogs = computed(() => {
  if (!keyword.value) return logs.value
  return logs.value.filter(log => Object.values(log).some(v => String(v).includes(keyword.value)))
})

const fetchLogs = async (id) => {
  if (!id && !innerTargetId.value) {
    ElMessage.warning('缺少必要的查询参数')
    return
  }

  logs.value = await selectActionLogs(innerType.value,innerTargetId.value)

  emit('update:modelValue', true)
  visible.value = true

  if (!logs.value){
    logs.value = []
  }
}

const open = (type, id) => {
  innerType.value = type
  innerTargetId.value = id
  fetchLogs(id)
}

defineExpose({ open, fetchLogs })
</script>

<style scoped>
.log-dialog .el-dialog {
  max-width: 900px;
  width: 80vw;
  max-height: 700px;
}

.query-area {
  margin-bottom: 8px;
}
.query-area .input-field {
  width: 240px;
}

.table-area {
  max-height: 500px;
  overflow-y: auto;
}


.cell-wrap {
  white-space: normal;
  word-break: break-word;
}
</style>
